<template>
  <div class="goodsClassify-wrap">
      <h4>{{id ? '编辑' : '新增'}}商品分类</h4>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="分类名称">
            <el-input v-model="form.title" clearable></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
import { creatGoodsClassify, idGetGoodsClassify, updateGoodsClassify } from '../../utils/api/goods'
export default {
    name: 'goodsClassify',
    data() {
        return {
            id: '',
            form: {
                title: ''
            }
        }
    },
    created() {
        console.log(this.$route.params.id)
        if (this.$route.params.id) {
            this.id = this.$route.params.id
            this.getClassify()
        }
    },
     methods: {
         // 提交
        async onSubmit () {
            let res
            if (this.id) {
                res = await updateGoodsClassify(this.id, this.form)
            } else {
                res = await creatGoodsClassify(this.form)
            }
            if(res.code === 200) {
                this.$router.push({
                    path: '/classifyList'
                })
            }
        },
        async getClassify() {
            let res = await idGetGoodsClassify(this.id)
            this.form.title = res.data.title
        }
     }
}
</script>

<style lang="less" scoped>
.goodsClassify-wrap {
    h4 {
        margin-top: 10px;
    }
    .el-form {
        margin-top: 40px;
        width: 50%;
        .el-button--primary {
            text-align: center;
            background-color: #45BE93;
            border-color: #45BE93;
        }
    }
}
</style>